<template>
  <d2-container>
    <el-table border :data="tableData" style="width: 100%" header-align="center">
      <el-table-column type="selection" width="55"></el-table-column>
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <el-table-column prop="task_type" label="任务类型" align="center">
        <template slot-scope="scope">
          <span v-show="scope.row.task_type == 1" style="color:#00cca3;">购买</span>
          <span v-show="scope.row.task_type == 2" style="color:#67c23a;">点赞</span>
          <span v-show="scope.row.task_type == 3" style="color:#409eff;">评论</span>
          <span v-show="scope.row.task_type == 4" style="color:#e6a23c;">浏览</span>
          <span v-show="scope.row.task_type == 5" style="color:#e6a23c;">问大家(问)</span>
          <span v-show="scope.row.task_type == 6" style="color:#e6a23c;">问大家(答)</span>
        </template>
      </el-table-column>
      <el-table-column prop="task_class" label="平台类型" align="center">
        <template slot-scope="props">
          <p style="text-align: center;">{{
              props.row.platform_type == 1 ?
                '饿了么' : (props.row.platform_type == 2 ? '大麦' : (props.row.platform_type == 3 ? '大众点评' : (props.row.platform_type ==
                4 ? '美团' : '小红书')))
            }}</p>
        </template>
      </el-table-column>
      <el-table-column prop="picture_address" label="任务主图" align="center">
        <template slot-scope="scope">
          <viewer>
            <img :src="scope.row.picture_address" style="width:80px;height:80px;" alt="">
          </viewer>
        </template>
      </el-table-column>
      <el-table-column prop="brushhands_name" label="买手姓名" width="180" align="center"></el-table-column>
      <el-table-column prop="user_commission" label="买手佣金" width="180" align="center"></el-table-column>
      <el-table-column prop="picture_address" label="买手完成截图" align="center">
        <template slot-scope="scope">
          <viewer>
            <img :src="scope.row.image" v-if="scope.row.image!=''" style="width:80px;height:80px;" alt="">
            <span v-if="scope.row.image==''">暂无上传图片</span>
          </viewer>
        </template>
      </el-table-column>
      <el-table-column prop="link" label="链接" width="200" align="center"></el-table-column>
      <el-table-column prop="price" label="商品金额" width="120" align="center">
        <template slot-scope="scope">
          <span v-if="scope.row.task_type == 1">购买</span>
          <span v-if="scope.row.task_type != 1">暂无购买金额</span>
        </template>
      </el-table-column>
      <el-table-column prop="create_time" label="创建时间" align="center"></el-table-column>
      <el-table-column fixed="right" label="审核" width="160" align="center">
        <template slot-scope="scope">
          <el-button type="danger" size="mini" v-if="scope.row.task_status == 1" @click="cancel(scope.row)">取消任务</el-button>
          <el-button type="danger" size="mini" v-if="scope.row.task_status==7" disabled>任务待审核</el-button>
          <el-button v-if="scope.row.task_status == 3" type="success" size="mini" plain disabled>已通过</el-button>
          <el-button v-if="scope.row.task_status == 4" type="info" size="mini" plain disabled>已拒绝</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page.sync="ruleFrom.page"
      :page-sizes="[20,50, 100,300, 500,1000]"
      :page-size="20"
      background
      layout="sizes, prev, pager, next"
      :total="ruleFrom.total"
      style="text-align:right;margin:10px 0;">
    </el-pagination>
  </d2-container>
</template>

<script>
import {ExtraTaskList,ExtraTaskCancel} from "@/api/sys.login";
export default {
  name: "index",
  data() {
    return {
      tableData:[],
      ruleFrom:{
        page:1,
        pageSize:20,
        link:"",
        status:"",
        total:"",
      },
    }
  },
  methods: {
    ExtraTaskLists() {
      let params = {
        page:this.ruleFrom.page,
        pageSize:this.ruleFrom.pageSize,
        link:this.ruleFrom.link,
        status:this.ruleFrom.status,
      }
      ExtraTaskList(params).then((res) => {
        this.tableData = res.data
        this.ruleFrom.total = res.count
      })
    },
    cancel(row){
      let params = {
        task_id:row.id
      }
      ExtraTaskCancel(params).then((res)=>{
        this.ExtraTaskLists()
      })
    },
    handleSizeChange(val){
       this.ruleFrom.pageSize = val
      this.ExtraTaskLists()
    },
    handleCurrentChange(val){
      console.log(val);
      this.ruleFrom.page = val
      this.ExtraTaskLists()
    }
  },
  created() {
    this.ExtraTaskLists()
  }
}
</script>

<style scoped>

</style>
